<template>
  <div class="activity">
    <div class="activity-header">
      <el-card class="drug-head-contatiner-title2">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
          <el-form-item label="开始时间">
            <el-date-picker
              v-model="formSearch.startTime"
              type="datetime"
              placeholder="--请选择--"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="结束时间">
            <el-date-picker
              v-model="formSearch.endTime"
              type="datetime"
              placeholder="--请选择--"
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </el-form-item>
          <el-form-item label="修改表名">
            <el-input v-model="formSearch.TableName" />
          </el-form-item>
          <el-form-item label="修改字段">
            <el-input v-model="formSearch.Field" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
            <el-button @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
    <div class="activity-list">
      <el-row>
        <el-col>
          <!-- 角色列表 -->
          <el-table :data="modifyrecordList" border stripe>
            <!-- 索引列 -->
            <el-table-column
              type="index"
              label="#"
              :index="indexMethod"
            ></el-table-column>
            <el-table-column
              prop="TableName"
              label="修改表名"
            ></el-table-column>
            <el-table-column prop="Field" label="修改字段"></el-table-column>
            <el-table-column prop="Before" label="修改前"></el-table-column>
            <el-table-column prop="After" label="修改后"></el-table-column>
            <el-table-column
              prop="ModifyTime"
              label="操作时间"
              :formatter="timeFormat"
            ></el-table-column>
            <el-table-column
              prop="operateName"
              label="操作人"
            ></el-table-column>
          </el-table>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12" :offset="8">
          <el-pagination
            background
            layout="total,prev, pager, next"
            v-model:total="formSearch.total"
            v-model:page-size="formSearch.pageSize"
            v-model:current-page="formSearch.page"
            @current-change="handleCurrentChange"
          />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { getModifyList } from '@/network/modifyrecord.js';
import { ref, reactive, onBeforeMount } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
const onReset = () => {
  formSearch.field = '';
  formSearch.tableName = '';
  formSearch.page = 1;
  initData();
};
// 搜索条件
const formSearch = reactive({
  startTime: getInitTime(1),
  endTime: getInitTime(),
  total: 0,
  page: 1,
  pageSize: 10,
  TableName: '',
  Field: '',
});
function timeFormat(row, column, v, i) {
  return moment(String(v)).format('YYYY-MM-DD hh:mm:ss');
}
function getInitTime(intday, hour) {
  let secodenpast = new Date().getTime() - (intday || 0) * 24 * 60 * 60 * 1000;
  var now = new Date(secodenpast);
  var year = now.getFullYear(); //得到年份
  var month = now.getMonth(); //得到月份
  var date = now.getDate(); //得到日期
  hour = hour || ' 00:00:00'; //默认时分秒 如果传给后台的格式为年月日时分秒，就需要加这个，如若不需要，此行可忽略
  month = month + 1;
  month = month.toString().padStart(2, '0');
  date = date.toString().padStart(2, '0');
  let x = `${year}-${month}-${date}${hour}`;
  return x;
}
//初始化
let modifyrecordList = ref(null);
const initData = async () => {
  let params = {
    tableName: formSearch.TableName,
    field: formSearch.Field,
    startTime: formSearch.startTime,
    endTime: formSearch.endTime,
    page: formSearch.page,
    pageSize: formSearch.pageSize,
  };
  await getModifyList(params).then((res) => {
    modifyrecordList.value = res.data;
    formSearch.total = res.total;
  });
};
//初始化字典
const initDict = async () => {};
onBeforeMount(() => {
  initData();
  initDict();
});

//分页索引
const indexMethod = (index) => {
  return index + (formSearch.page - 1) * formSearch.pageSize + 1;
};

//搜索
const onSubmit = async () => {
  formSearch.page = 1;
  await initData();
};

//分页
const handleCurrentChange = async (val) => {
  formSearch.page = val;
  await initData();
};
</script>

<style lang="scss" scoped>
.activity {
  margin: 14px 15px 14px;
  .activity-header {
    .drug-head-contatiner-title2 {
      font-size: 18px;
      font-weight: bold;
      color: #333;
      margin-top: 14px;
    }
  }
  .activity-list {
    margin-top: 14px;
  }
}
</style>
